<template>
	<div class="app-container">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>设备详情</span>
					<el-button @click="handleBack">返回</el-button>
				</div>
			</template>

			<el-descriptions :column="2" border>
				<el-descriptions-item label="设备名称">{{
					detail.name
				}}</el-descriptions-item>
				<el-descriptions-item label="设备类型">
					{{ getEquipmentType(detail.type) }}
				</el-descriptions-item>
				<el-descriptions-item label="位置">{{
					detail.location
				}}</el-descriptions-item>
				<el-descriptions-item label="型号">{{
					detail.model
				}}</el-descriptions-item>
				<el-descriptions-item label="制造商">{{
					detail.manufacturer
				}}</el-descriptions-item>
				<el-descriptions-item label="状态">
					<el-tag :type="getStatusType(detail.status)">
						{{ getStatusText(detail.status) }}
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="安装日期">
					{{
						detail.installDate
							? dayjs(detail.installDate).format("YYYY-MM-DD")
							: "-"
					}}
				</el-descriptions-item>
				<el-descriptions-item label="最后维护日期">
					{{
						detail.lastMaintenanceDate
							? dayjs(detail.lastMaintenanceDate).format("YYYY-MM-DD")
							: "-"
					}}
				</el-descriptions-item>
				<el-descriptions-item label="下次维护日期">
					{{
						detail.nextMaintenanceDate
							? dayjs(detail.nextMaintenanceDate).format("YYYY-MM-DD")
							: "-"
					}}
				</el-descriptions-item>
				<el-descriptions-item label="维护周期"
					>{{ detail.maintenanceCycle }}天</el-descriptions-item
				>
				<el-descriptions-item label="备注" :span="2">
					<div class="content">{{ detail.notes || "-" }}</div>
				</el-descriptions-item>
			</el-descriptions>

			<!-- 维护记录 -->
			<div
				v-if="detail.maintenanceRecords && detail.maintenanceRecords.length > 0"
				class="history-section"
			>
				<h3>维护记录</h3>
				<el-table :data="detail.maintenanceRecords" style="width: 100%">
					<el-table-column prop="maintenanceDate" label="维护日期" width="120">
						<template #default="scope">
							{{ dayjs(scope.row.maintenanceDate).format("YYYY-MM-DD") }}
						</template>
					</el-table-column>
					<el-table-column prop="maintenanceType" label="维护类型" width="120">
						<template #default="scope">
							{{ getMaintenanceType(scope.row.maintenanceType) }}
						</template>
					</el-table-column>
					<el-table-column prop="maintainer" label="维护人员" width="120" />
					<el-table-column prop="cost" label="维护费用" width="120">
						<template #default="scope"> {{ scope.row.cost }}元 </template>
					</el-table-column>
					<el-table-column prop="status" label="状态" width="100">
						<template #default="scope">
							<el-tag
								:type="scope.row.status === 'Completed' ? 'success' : 'warning'"
							>
								{{ scope.row.status === "Completed" ? "已完成" : "进行中" }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="description" label="维护内容" />
					<el-table-column prop="notes" label="备注" />
				</el-table>
			</div>

			<!-- 故障记录 -->
			<div
				v-if="detail.faultRecords && detail.faultRecords.length > 0"
				class="history-section"
			>
				<h3>故障记录</h3>
				<el-table :data="detail.faultRecords" style="width: 100%">
					<el-table-column prop="faultDate" label="故障日期" width="120">
						<template #default="scope">
							{{ dayjs(scope.row.faultDate).format("YYYY-MM-DD") }}
						</template>
					</el-table-column>
					<el-table-column prop="faultType" label="故障类型" width="120">
						<template #default="scope">
							{{ getFaultType(scope.row.faultType) }}
						</template>
					</el-table-column>
					<el-table-column prop="reporter" label="报告人" width="120" />
					<el-table-column prop="status" label="状态" width="100">
						<template #default="scope">
							<el-tag :type="getFaultStatusType(scope.row.status)">
								{{ getFaultStatusText(scope.row.status) }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="description" label="故障描述" />
					<el-table-column prop="solution" label="解决方案" />
					<el-table-column prop="notes" label="备注" />
				</el-table>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";
import { getEquipment } from "@/api/property";

const route = useRoute();
const router = useRouter();

// 详情数据
const detail = ref({});

// 获取设备类型文本
const getEquipmentType = (type) => {
	const types = {
		Elevator: "电梯",
		FireFighting: "消防设备",
		Security: "监控设备",
		Other: "其他",
	};
	return types[type] || type;
};

// 获取状态类型
const getStatusType = (status) => {
	const types = {
		Normal: "success",
		Maintenance: "warning",
		Fault: "danger",
	};
	return types[status] || "info";
};

// 获取状态文本
const getStatusText = (status) => {
	const texts = {
		Normal: "正常",
		Maintenance: "维修中",
		Fault: "故障",
	};
	return texts[status] || status;
};

// 获取维护类型文本
const getMaintenanceType = (type) => {
	const types = {
		Regular: "定期维护",
		Emergency: "紧急维护",
		Repair: "故障维修",
	};
	return types[type] || type;
};

// 获取故障类型文本
const getFaultType = (type) => {
	const types = {
		Mechanical: "机械故障",
		Electrical: "电气故障",
		Software: "软件故障",
		Other: "其他故障",
	};
	return types[type] || type;
};

// 获取故障状态类型
const getFaultStatusType = (status) => {
	const types = {
		Pending: "info",
		Processing: "warning",
		Resolved: "success",
	};
	return types[status] || "info";
};

// 获取故障状态文本
const getFaultStatusText = (status) => {
	const texts = {
		Pending: "待处理",
		Processing: "处理中",
		Resolved: "已解决",
	};
	return texts[status] || status;
};

// 获取详情
const getDetail = async () => {
	try {
		const res = await getEquipment(route.params.id);
		detail.value = res;
	} catch (error) {
		console.error("获取设备详情失败:", error);
	}
};

// 返回按钮
const handleBack = () => {
	router.push("/property/equipment/list");
};

onMounted(() => {
	getDetail();
});
</script>

<style scoped>
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content {
	white-space: pre-wrap;
	line-height: 1.5;
}
.history-section {
	margin-top: 30px;
}
</style>
